<template>
    <div class="pieChart" v-if="shows">
        <div class='pieChart_title'>{{name}}</div>
        <div :id='id' style='width:100%;height:100%' class='pieChart_item'>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
   name:"pieChart",
   props:["name",'url','appid','id'],
   data(){
       return{
           options:{},
           shows:true,
           myChart:null
       }
   },
   methods:{
       loadData(){
           this.myChart = echarts.init(document.getElementById(this.id));
           this.$post(this.appid,this.url,{}).then(data=>{
               this.options = {
                    xAxis: {
                        type: 'category',
                        data: data.xs.split(",")
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: data.ys.split(","),
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: 'black',
                                            fontSize: 16
                                        }
                                    }
                                }
                            }
                        }
                    ]
                };
              
           
               this.myChart.setOption(this.options);
           });
       }
   },
   mounted(){
      this.loadData();
      let sef=this;
      window.addEventListener("resize", () => {
          // window.setTimeout(function(){
                sef.myChart.resize();
         //  },500)
       })
    
   }
}
</script>
<style scoped>
.pieChart{
   width: 100%;
   height:100%;
   background:#fff;
   padding:10px;
   box-sizing: border-box;
   box-shadow: 0px 2px 4px 3px rgba(195, 206, 220, 0.07);
   border-radius: 8px;
   display:flex;
   flex-direction: column;
}
.pieChart_title{
   
   font-weight: 800;
   color: #434E7E;
}
.pieChart_item{
   flex:1;
}
</style>